<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜拳</title>
    <style>
        table {
            width: 600px;
            height: 400px;
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
        }

        td {
            border: 1px solid black;
        }

        .c1 {
            font-size: 2rem;
            color: red;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            // 定义胜利、失败、平局的次数变量
            let win = 0;
            let defeat = 0;
            let draw = 0;
            $("#choice").change(function () {
                console.log("----------------")
                let choice = $("#choice").val();
                if (choice == 1) {
                    $("#yourSelect").attr("src", "../images/st.jpg");
                } else if (choice == 2) {
                    $("#yourSelect").attr("src", "../images/jd.jpg");
                } else if (choice == 3) {
                    $("#yourSelect").attr("src", "../images/bu.jpg");
                } else {
                    $("#yourSelect").attr("src", "../images/zb.jpg");
                }
            });

            $("#confirm").click(function () {
                // 生成用户的出拳
                let choice = $("#choice").val();
                if (choice == 1) {
                    $("#yourChoice").attr("src", "../images/st.jpg");
                } else if (choice == 2) {
                    $("#yourChoice").attr("src", "../images/jd.jpg");
                } else if (choice == 3) {
                    $("#yourChoice").attr("src", "../images/bu.jpg");
                } else {
                    $("#yourChoice").attr("src", "../images/zb.jpg");
                }

                // 生成电脑的出拳
                // 随机生成1-3的整数
                let comValue = parseInt(Math.random() * 3 + 1);
                if (comValue == 1) {
                    $("#comChoice").attr("src", "../images/st.jpg");
                } else if (comValue == 2) {
                    $("#comChoice").attr("src", "../images/jd.jpg");
                } else {
                    $("#comChoice").attr("src", "../images/bu.jpg");
                }

                // 判断猜拳结果
                if (choice == comValue) {
                    $(".c1").html("平局");
                    draw++;
                } else if (choice == 1 && comValue == 2 || choice == 2 && comValue == 3 || choice == 3 && comValue == 1) {
                    $(".c1").html("你赢了");
                    win++;
                } else {
                    $(".c1").html("你输了");
                    defeat++;
                }

                // 计算猜拳的次数
                $("#win").html(win);
                $("#defeat").html(defeat);
                $("#draw").html(draw);
                $("#count").html(win + defeat + draw);
            });
        });
    </script>
</head>
<body>
<table>
    <tr>
        <td>
            <span>你</span>
            <div>
                <img id="yourChoice" src="../images/zb.jpg" alt="图片加载失败">
            </div>
        </td>
        <td>VS</td>
        <td>
            <span>电脑</span>
            <div>
                <img id="comChoice" src="../images/zb.jpg" alt="图片加载失败">
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3" class="c1">Are You Ready?</td>
    </tr>
    <tr>
        <td>
            <span>你选择了:</span>
            <div>
                <img id="yourSelect" src="../images/zb.jpg" alt="图片加载失败">
            </div>
        </td>
        <td>Choice</td>
        <td>
            <span>请选择出拳:</span>
            <div>
                <select id="choice">
                    <option value="-1">请选择</option>
                    <option value="1">石头</option>
                    <option value="2">剪刀</option>
                    <option value="3">布</option>
                </select>
                <button id="confirm">确认出拳</button>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            总数:<span id="count">0</span>
            胜利:<span id="win">0</span>
            失败:<span id="defeat">0</span>
            平局:<span id="draw">0</span>
        </td>
    </tr>
</table>
</body>
</html>